<template>
  <a-drawer
    :root-style="{ marginLeft: '64px', zIndex: 999 }"
    :mask-style="{ background: 'transparent' }"
    :open="open"
    title="切换场景"
    placement="left"
    :width="300"
    :body-style="{ padding: 0 }"
    :closable="false"
    class="ff-drawer"
    @close="onClose"
  >
    <a-list size="small" item-layout="horizontal" :data-source="viewData" :split="false">
      <template #renderItem="{ item }">
        <a-list-item
          class="cursor-pointer"
          :class="item.id === currentId ? 'bg-#e6f4ff' : ''"
          :un-hover="item.id === currentId ? '' : 'bg-#0000000a'"
          @click="onSelect(item)"
        >
          <div>
            <a-avatar shape="square" :size="30" :src="`/api/image/0/60/${item.coverId}`" />
          </div>
          <div class="flex-1 px-10">
            <div class="font-bold m-0">{{ item.title }}</div>
            <p class="mb-0 text-12">{{ item.description || '-' }}</p>
          </div>
          <template #extra>
            <div v-if="item.id === currentId">
              <check-circle-two-tone two-tone-color="#52c41a" />
            </div>
          </template>
        </a-list-item>
      </template>
    </a-list>
  </a-drawer>
</template>

<script setup lang="ts">
import viewApi from '@/api/view.ts'
import { useUserStore } from '@/store'
import { CheckCircleTwoTone } from '@ant-design/icons-vue'
import { useAuthStore } from '@/store'
import { Modal } from 'ant-design-vue'

defineProps<{
  open: boolean
}>()
const currentId = ref(useUserStore().userInfo.viewId)
const emits = defineEmits(['update:open'])
const viewData = ref<any[]>([])

const authStore = useAuthStore()

const onClose = () => {
  emits('update:open', false)
}
const onSelect = (item: any) => {
  if (currentId.value !== item.id) {
    Modal.confirm({
      title: '提示',
      type: 'info',
      content: `是否切换到【${item.title}】场景?`,
      onOk: () => {
        currentId.value = item.id
        selectView(item.id).then(async ({ data }) => {
          authStore.setToken(data)
          window.location.href = window.location.href.replace(/\?.*$/, '')
        })
      },
      onCancel() {},
    })
  }
}
onMounted(() => {
  viewApi.all().then(({ data }) => {
    viewData.value = data
  })
})
</script>

<style scoped></style>
